@import '../../../../variables';

:host {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: $s * 2;
  padding-bottom: $s * 2;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.task-title {
  text-align: center;
  font-size: 30px;
  line-height: 1.1;
  margin: $s;
  margin-top: $s * 3;
  margin-bottom: $s * 3;

  :host.isShowNotes & {
    margin-top: $s * 7;
  }

  @media (max-height: 799px) and (max-width: 499px) {
    :host.isShowNotes & {
      font-size: 24px;
      margin-bottom: $s * 2;
    }
  }
}

.progress-wrapper {
  position: relative;
}

progress-circle {
  width: 150px;
  height: 150px;
  @media (min-height: 800px) and (min-width: 500px) {
    width: 180px;
    height: 180px;
  }
  @media (min-height: 900px) and (min-width: 600px) {
    width: 220px;
    height: 220px;
  }
  @media (max-height: 799px) and (max-width: 499px) {
    :host.isShowNotes & {
      width: 120px;
      height: 120px;
    }
  }
}

.progress-label-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  .focus-time {
    font-size: 24px;
    font-weight: bold;

    :host.isShowNotes & {
      font-size: 20px;
    }
  }

  .task-times {
    font-size: 12px;
  }
}

.simple-counter-buttons {
  display: flex;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);

  simple-counter-button.isHiddenWithoutFocus {
    @include mousePrimaryDevice {
      display: none;
    }

    :host:hover & {
      display: block;
    }
  }
}

.controls {
  margin-top: $s * 2;
  // to fix weird a + mat-icon behavior
  display: flex;
  justify-content: center;
  align-items: center;

  @include mousePrimaryDevice {
    visibility: hidden;
  }

  :host:hover & {
    visibility: visible;
  }

  // to fix weird a + mat-icon behavior
  a {
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  a,
  button {
    width: 56px;
    height: 56px;

    mat-icon {
      font-size: 32px !important; //make it bigger, the default being 24px.
      width: 32px;
      height: 32px;
    }
  }
}

.notes-and-attachments {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.notes-panel {
  border-radius: 4px;
  margin: auto;
  padding: $s * 2;
  width: auto;
  width: 100%;
  flex-grow: 1;
  max-width: $component-max-width;
  overflow: hidden;
  min-height: 60px;

  inline-markdown {
    max-height: 100%;
    overflow-y: auto;
    @include noteStyle;
    text-align: right;

    ::ng-deep .markdown-wrapper {
      text-align: left;
      max-height: 100%;
      height: 300px !important;
      height: 100% !important;
    }

    ::ng-deep textarea {
      background: inherit;
      color: inherit;
      border: none;
      box-sizing: border-box;
      word-wrap: break-word;
      display: block;
      resize: none;
      min-height: inherit;
      overflow: auto;
      padding: $s $s * 2;

      &:focus {
        outline: none;
      }
    }
  }
}

.attachment-list-wrapper {
  margin-top: $s;
  max-width: 100vw;
  padding: 0 $s;
  overflow-x: auto;
  min-height: 111px;

  @include mousePrimaryDevice {
    visibility: hidden;
  }

  :host:hover & {
    visibility: visible;
  }

  ::ng-deep ul {
    display: block;
    white-space: nowrap;
    text-align: center;
    margin: 0;

    li {
      display: inline-block;
    }
  }
}

.drag-over-msg {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 1;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  z-index: 31;
}
